<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
        }
        .hot-list{
            width: 700px;
            /* border: 1px solid red; */
        }
        .hot-head,.hot-main{
            overflow: hidden;
        }
        .hot-head h2{
            float: left;
        }
        .hot-head span{
            float: right;
        }
        .hot-main{
            margin-top: 20px;
            margin-left: 20px;
        }
        .hot-main ul li{
            float: left;
            margin-right: 50px;
            margin-bottom: 20px;

        }
    </style>
</head>

<body>
    <div class="hot-list">
        <div class="hot-head">
            <h2>热门活动</h2>
            <span>
                更多
            </span>
        </div>
        <div class="hot-main">
            <ul>
                <li><img src="./image2/img1.png" alt="">
                    <p>
                        这个作业真是太简单了
                    </p>
                </li>
                <li><img src="./image2/img2.png" alt="">
                    <p>
                        这个作业真是太简单了
                    </p>
                </li>
                <li><img src="./image2/img3.png" alt="">
                    <p>
                        这个作业真是太简单了
                    </p>
                </li>
                <li><img src="./image2/img4.png" alt="">
                    <p>
                        这个作业真是太简单了
                    </p>
                </li>
            </ul>

        </div>
    </div>
</body>

</html>